﻿<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<head>
	<link rel="stylesheet" href="${ctxStatic}/kitadmin/css/global.css" media="all">
	<link rel="stylesheet" href="${ctxStatic}/kitadmin/plugins/font-awesome/css/font-awesome.min.css">
	<link rel="stylesheet" href="${ctxStatic}/kitadmin/css/table.css" />
</head>

<body>
	<div class="admin-main">

		<blockquote class="layui-elem-quote">
			<a href="javascript:;" class="layui-btn layui-btn-small" id="add">
				<i class="layui-icon">&#xe608;</i> 添加信息
			</a>
			<a href="#" class="layui-btn layui-btn-small" id="import">
				<i class="layui-icon">&#xe608;</i> 导入信息
			</a>
			<a href="#" class="layui-btn layui-btn-small">
				<i class="fa fa-shopping-cart" aria-hidden="true"></i> 导出信息
			</a>
			<a href="#" class="layui-btn layui-btn-small" id="getSelected">
				<i class="fa fa-shopping-cart" aria-hidden="true"></i> 获取全选信息
			</a>
			<a href="javascript:;" class="layui-btn layui-btn-small" id="search">
				<i class="layui-icon">&#xe615;</i> 搜索
			</a>
		</blockquote>
		<fieldset class="layui-elem-field">
			<legend>数据列表</legend>
			<div class="layui-field-box layui-form">
				<table class="layui-table admin-table">
					<thead>
						<tr>
							<th style="width: 30px;"><input type="checkbox" lay-filter="allselector" lay-skin="primary"></th>
							<th>姓名</th>
							<th>年龄</th>
							<th>创建时间</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody id="content">
					</tbody>
				</table>
			</div>
		</fieldset>
		<div class="admin-table-page">
			<div id="paged" class="page">
			</div>
		</div>
	</div>
	<!--模板-->
	<script type="text/html" id="tpl">
		{{# layui.each(d.list, function(index, item){ }}
		<tr>
			<td><input type="checkbox" lay-skin="primary"></td>
			<td>{{ item.name }}</td>
			<td>{{ item.age }}</td>
			<td>{{ item.createtime }}</td>
			<td>
				<a href="/detail-1" target="_blank" class="layui-btn layui-btn-normal layui-btn-mini">预览</a>
				<a href="javascript:;" data-name="{{ item.name }}" data-opt="edit" class="layui-btn layui-btn-mini">编辑</a>
				<a href="javascript:;" data-id="1" data-opt="del" class="layui-btn layui-btn-danger layui-btn-mini">删除</a>
			</td>
		</tr>
		{{# }); }}
	</script>
	<%--<script type="text/javascript" src="plugins/layui/layui.js"></script>--%>
	<script>
		layui.config({
			base: 'js/'
		});

		layui.use(['paging', 'form'], function() {
			var $ = layui.jquery,
				paging = layui.paging(),
				layerTips = parent.layer === undefined ? layui.layer : parent.layer, //获取父窗口的layer对象
				layer = layui.layer, //获取当前窗口的layer对象
				form = layui.form();

			paging.init({
				openWait: true,
				url: 'datas/laytpl_laypage_data.json?v=' + new Date().getTime(), //地址
				elem: '#content', //内容容器
				params: { //发送到服务端的参数
				},
				type: 'GET',
				tempElem: '#tpl', //模块容器
				pageConfig: { //分页参数配置
					elem: '#paged', //分页容器
					pageSize: 3 //分页大小
				},
				success: function() { //渲染成功的回调
					//alert('渲染成功');
				},
				fail: function(msg) { //获取数据失败的回调
					//alert('获取数据失败')
				},
				complate: function() { //完成的回调
					//alert('处理完成');
					//重新渲染复选框
					form.render('checkbox');
					form.on('checkbox(allselector)', function(data) {
						var elem = data.elem;

						$('#content').children('tr').each(function() {
							var $that = $(this);
							//全选或反选
							$that.children('td').eq(0).children('input[type=checkbox]')[0].checked = elem.checked;
							form.render('checkbox');
						});
					});

					//绑定所有编辑按钮事件
					$('#content').children('tr').each(function() {
						var $that = $(this);
						$that.children('td:last-child').children('a[data-opt=edit]').on('click', function() {
							layer.msg($(this).data('name'));
						});

					});

				},
			});
			//获取所有选择的列
			$('#getSelected').on('click', function() {
				var names = '';
				$('#content').children('tr').each(function() {
					var $that = $(this);
					var $cbx = $that.children('td').eq(0).children('input[type=checkbox]')[0].checked;
					if($cbx) {
						var n = $that.children('td:last-child').children('a[data-opt=edit]').data('name');
						names += n + ',';
					}
				});
				layer.msg('你选择的名称有：' + names);
			});

			$('#search').on('click', function() {
				parent.layer.alert('你点击了搜索按钮')
			});

			var addBoxIndex = -1;
			$('#add').on('click', function() {
				if(addBoxIndex !== -1)
					return;
				//本表单通过ajax加载 --以模板的形式，当然你也可以直接写在页面上读取
				$.get('temp/edit-form.html', null, function(form) {
					addBoxIndex = layer.open({
						type: 1,
						title: '添加表单',
						content: form,
						btn: ['保存', '取消'],
						shade: false,
						offset: ['100px', '30%'],
						area: ['600px', '400px'],
						zIndex: 19950924,
						maxmin: true,
						yes: function(index) {
							//触发表单的提交事件
							$('form.layui-form').find('button[lay-filter=edit]').click();
						},
						full: function(elem) {
							var win = window.top === window.self ? window : parent.window;
							$(win).on('resize', function() {
								var $this = $(this);
								elem.width($this.width()).height($this.height()).css({
									top: 0,
									left: 0
								});
								elem.children('div.layui-layer-content').height($this.height() - 95);
							});
						},
						success: function(layero, index) {
							//弹出窗口成功后渲染表单
							var form = layui.form();
							form.render();
							form.on('submit(edit)', function(data) {
								console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
								console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
								console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
								//调用父窗口的layer对象
								layerTips.open({
									title: '这里面是表单的信息',
									type: 1,
									content: JSON.stringify(data.field),
									area: ['500px', '300px'],
									btn: ['关闭并刷新', '关闭'],
									yes: function(index, layero) {
										layerTips.msg('你点击了关闭并刷新');
										layerTips.close(index);
										location.reload(); //刷新
									}

								});
								//这里可以写ajax方法提交表单
								return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
							});
							//console.log(layero, index);
						},
						end: function() {
							addBoxIndex = -1;
						}
					});
				});
			});

			$('#import').on('click', function() {
				var that = this;
				var index = layer.tips('只想提示地精准些', that, { tips: [1, 'white'] });
				$('#layui-layer' + index).children('div.layui-layer-content').css('color', '#000000');
			});
		});
	</script>
</body>
